// 函数组件
import React, { useState, useEffect, useContext } from 'react';
import './css/GoodAdd.less';
import '../../css/public.less'
import { Button, Checkbox, Form, Input, Select, Upload, Switch, Modal } from 'antd';
import { PlusOutlined } from '@ant-design/icons';
import type { CheckboxChangeEvent } from 'antd/es/checkbox';
import type { RcFile, UploadProps } from 'antd/es/upload';
import type { UploadFile } from 'antd/es/upload/interface';
import { addShop } from '../../../api/lf'

//把图片转码
const getBase64 = (file: RcFile): Promise<string> =>
    new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = () => resolve(reader.result as string);
        reader.onerror = (error) => reject(error);
    });

function GoodAdd() {



    useEffect(() => {

    },)

    const [brandArr, setBrandArr] = useState([
        { value: '品牌A', label: '品牌A' },
        { value: '品牌B', label: '品牌B' },
        { value: '品牌C', label: '品牌C' },
    ])//按品牌分类下拉框
    const [brandArr1, setBrandArr1] = useState([
        { value: '品牌A', label: '品牌A' },
        { value: '品牌B', label: '品牌B' },
        { value: '品牌C', label: '品牌C' },
    ])//按品牌分类下拉框
    const [payWayArr, setPayWayArr] = useState([{ value: '微信支付', label: '微信支付' }])//添加支付方式
    const [supplierArr, setSupplierArr] = useState([{ value: '供应商1', label: '供应商1' }, { value: '供应商2', label: '供应商2' }])//添加供应商
    const [shopArr, setShopArr] = useState([{ value: '店铺1', label: '店铺1' }, { value: '店铺2', label: '店铺2' }])//添加店铺
    //添加商品分类
    const [addBrandArr, setAddBrandArr] = useState([{ value: '探路者', label: '探路者' }, { value: 'Discovery', label: 'Discovery' }])//添加店铺
    //添加商品分类
    const firstChange = (value: string) => {
        console.log(`商品分类1 ${value}`);
    };
    const secondChange = (value: string) => {
        console.log(`商品分类2 ${value}`);
    };
    //添加支付方式
    const payWay = (value: string) => {
        console.log(`添加支付方式 ${value}`);
    };
    //添加供应商
    const supplier = (value: string) => {
        console.log(`添加供应商 ${value}`);
    };
    //添加店铺
    const shop = (value: string) => {
        console.log(`添加店铺 ${value}`);
    };
    //添加品牌
    const brand = (value: string) => {
        console.log(`添加店铺 ${value}`);
    };
    //是否包邮
    const FreeMail = (checked: boolean) => {
        console.log(`是否包邮 ${checked}`);
    };
    //服务保证
    const ServiceGuarantee = (e: CheckboxChangeEvent) => {
        console.log(`checked = ${e.target.checked}`);
    };
    //表单提交成功的回调
    const onFinish = (values: any) => {
        console.log('Success:', values);
    };
    //表单提交失败的回调
    const onFinishFailed = (errorInfo: any) => {
        console.log('Failed:', errorInfo);
    };

    return (
        <div className='GoodAdd'>
            {/* 头部 */}
            <div className='page-top'>
                {/* 左边标题 */}
                <div className='page-title'>
                    <p>添加商品</p>
                </div>
            </div>

            <div className='content'>
                {/* 标题1 */}
                <div style={{ backgroundColor: '#f2f2f2', height: 50, lineHeight: "50px", fontSize: "14px" }}><p style={{ marginLeft: "15px" }}>添加商品</p></div>
                <div className='title' >基本信息</div>

                {/* 要填写的表单 */}
                <div className='form'>
                    <Form

                        name="basic"
                        labelCol={{ span: 8 }}
                        wrapperCol={{ span: 16 }}
                        style={{ maxWidth: 600 }}
                        initialValues={{ remember: true }}
                        onFinish={onFinish}
                        onFinishFailed={onFinishFailed}
                        autoComplete="off"
                    >
                        <Form.Item
                            label="商品货号"
                            name="goodsSerNum"

                            rules={[{ required: true, message: '商品货号不能为空!' }]}
                        >
                            <Input placeholder="请输入商品货号" />
                        </Form.Item>
                        <Form.Item
                            label="商品名称"
                            name="goodsName"
                            rules={[{ required: true, message: '最多支持50个字!' }]}
                        >
                            <Input placeholder="请输入商品名称" />
                        </Form.Item>
                        <Form.Item
                            wrapperCol={{ span: 12 }}
                            label="商品分类"
                            name="classification1"

                            rules={[{ required: true, message: '请选择商品一级分类!' }]}
                        >

                            <Select

                                placeholder="请选择一级分类"
                                onChange={firstChange}
                                options={brandArr}
                            />
                        </Form.Item>

                        <Form.Item
                            wrapperCol={{ offset: 8, span: 12 }}

                            name="categoryName"

                            rules={[{ required: true, message: '请选择商品二级分类!' }]}
                        >
                            <Select


                                placeholder="请选择二级分类"
                                onChange={secondChange}
                                options={brandArr1}
                            />

                        </Form.Item>
                        <Form.Item
                            wrapperCol={{ span: 12 }}
                            label="支付方式"
                            name="goodsPay"

                            rules={[{ required: true, message: '请选择支付方式!' }]}
                        >
                            <Select

                                placeholder="请选择"
                                onChange={payWay}
                                options={payWayArr}
                            />

                        </Form.Item>
                        <Form.Item
                            wrapperCol={{ span: 12 }}
                            label="供应商"
                            name="goodsSupplieId"

                            rules={[{ required: true, message: '请选择供应商!' }]}
                        >
                            <Select
                                placeholder="请选择"
                                onChange={supplier}
                                options={supplierArr}
                            />
                        </Form.Item>
                        <Form.Item
                            wrapperCol={{ span: 12 }}
                            label="店铺"
                            name="goodsShopId"

                            rules={[{ required: true, message: '请选择店铺!' }]}
                        >
                            <Select
                                placeholder="请选择"
                                onChange={shop}
                                options={shopArr}
                            />
                        </Form.Item>
                        <Form.Item
                            wrapperCol={{ span: 12 }}
                            label="品牌"
                            name="goodsBrandId"
                            rules={[{ required: true, message: '请选择品牌!' }]}
                        >
                            <Select
                                placeholder="请选择品牌"
                                onChange={brand}
                                options={addBrandArr}
                            />
                        </Form.Item>
                        <Form.Item
                            wrapperCol={{ span: 24 }}
                            label="封面图片"
                            name="goodsImg"
                            valuePropName="fileList"
                            rules={[{ required: true, message: '请选择封面图片!' }]}
                        >
                            <Upload action="/upload.do" listType="picture-card">
                                <div>
                                    <PlusOutlined />
                                    <div style={{ marginTop: 8 }}>点击上传</div>
                                </div>

                            </Upload>
                            <span className='cover'>
                                (图片尺寸为200*200，单位像素，不超过2M，支持PNG、JPEG、JPG格式)
                            </span>
                        </Form.Item>


                        <Form.Item
                            label="是否包邮"
                            name="goodsPost"
                            valuePropName="checked"
                        >
                            <Switch defaultChecked onChange={FreeMail} />
                        </Form.Item>
                        <Form.Item
                            label="销量"
                            name="goodsSell"
                        >
                            <Input placeholder="请输入销量" />
                        </Form.Item>
                        <Form.Item
                            label="推荐商品"
                            name="goodsChildId"
                        >
                            <Input placeholder="请输入推荐商品的商品货号，以逗号隔开" />
                        </Form.Item>
                        <Form.Item
                            label="服务保证"
                            name="goodsSer"
                            valuePropName="checked"
                        >
                            <Checkbox onChange={ServiceGuarantee}>正品保证</Checkbox>
                            <Checkbox onChange={ServiceGuarantee}>里程抵扣兑换</Checkbox>


                        </Form.Item>
                        <Form.Item wrapperCol={{ offset: 12, span: 24 }}>
                            <Button type="primary" htmlType="submit">
                                保存
                            </Button>
                        </Form.Item>
                    </Form>
                </div>
            </div>
        </div>
    )
}

export default GoodAdd